<#include "../common/_header.htm">
<div class="content-wrapper" style="margin-left: 0px">
    <section class="content">
        <div class="row">
            <div class="bill-right">
                <form id="listForm">
                    <div class="box bg_gray">
                        <div class="box-header">
                            <div class="row RowSearchWork">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="form-inline">
                                            <div class="form-group form_z">
                                                <label class="control-label">日期范围</label>
                                                <div class="input-group">
                                                    <div class="input-icon-group">
                                                        <input type="text" class="form-control fc-clear form_datetime" id="starTime" />
                                                        <span id="scan" class="glyphicon glyphicon-calendar">
												        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label hidden-xs refsh"> 至 </label>
                                                <div class="input-group">
                                                    <div class="input-icon-group">
                                                        <input type="text" class="form-control form_datetime" id="endTime" />
                                                        <span id="scan" class="glyphicon glyphicon-calendar">
												        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group ml10">
                                                <label class="control-label">金额</label>
                                                <input type="text" class="form-control" id="minmoney" name="minmoney" value="" placeholder="" />
                                            </div>
                                            <div class="form-group ml10">
                                                <label class="control-label refsh">至</label>
                                                <input type="text" class="form-control" id="maxmoney" name="maxmoney" value="" placeholder="" />
                                            </div>
                                            <div class="form-group ml10">
                                                <label class="control-label hidden-xs">关键字</label>
                                                <input type="text" class="form-control" id="keyword" value="" placeholder="对方账号/开户名" />
                                            </div>
                                            <div class="form-group bill-buttonarea zcdbtn-con" style="text-align: center;">
                                                <input type="button" class="btn btn-primary" onclick="queryList();" value="查询" />
                                                <input type="button" class="btn btn-default" onclick="reset();" value="重置" />
                                                <input type="button" class="btn btn-primary daobtn" onclick="exportList();" value="导出" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="casemanage-switchtip casemanage-switchbank">
                            <div class="casemanage-zhexiantu" :class="{active:showType==1}" onClick="showType(1)"  title="切换为列表显示">
                                <i class="casemanage-switchtip-list"></i><span>列表</span>
                            </div>
                            <div class="casemanage-list" :class="{active:showType==0}" onClick="showType(0)"  title="切换为图表显示">
                                <i class="casemanage-switchtip-chart"  id="font_zhexian"></i><span>图表</span>
                            </div>
                        </div>
                        <div class="stream_body">
                            <span id="spantitle" class="title" style="height: 30px"></span>
                            <div id="showTable">
                                <div class="box-body table-responsive">
                                    <table id="table" class="table text-nowrap"></table>
                                </div>
                            </div>
                            <div id="showEchart" style="height: 300px;margin: 10px 10px 30px;display: flex">
                                <div style=" height: 300px;width: 50%">
                                    <div id="main1111111" style="height:300px;"></div>
                                </div>
                                <div style=" height: 300px;width: 50%">
                                    <div id="main2222222" style="height:300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

</div>

<script>
var caseId=parent.caseId;
	// $(document).ready(function(){
	// });
$(window).resize(function(){
    $('#table').datagrid('resize',{
        height:($(window).height())-($('.box-header').outerHeight(true))-($('#spantitle').outerHeight(true))-25,
    });
});
var bank = new Vue({
        el:".row",
        data:{
            showType:1
        }
    });
    function showType(type) {
        if (type==1) {
            bank.showType = 1
            $("#showTable").show();
            $("#showEchart").hide();
        }else {
            bank.showType = 0
            $("#showTable").hide();
            $("#showEchart").show();
        }
    }

    var cards = new Array();
    var spantitle = $("#spantitle");
    $("#listForm").validate({
        rules: {
            minmoney : {
                digits:true
            },
            maxmoney : {
                digits:true
            }
        },
        messages: {
            minmoney:'请输入一个正整数',
            maxmoney:'请输入一个正整数',
        }
    });

    function showAccountBody(bodynumber) {
        spantitle.append('<span> > <a class="listap" onclick="showAccountBody(\''+bodynumber+'\')" style="cursor:pointer;">'+bodynumber+'</a></span>');
        var opt =$('#table').datagrid('options');
        opt.sortName = "";
        opt.sortOder = "";
        $('#table').datagrid({
            url: '${ctx}/bill/stream/bank/body',
            fitColumns:true,
            queryParams: {
                bodyNumber:bodynumber,
                casemanageId:caseId
            },
            height:($(window).height())-($('.box-header').outerHeight(true))-($('#spantitle').outerHeight(true))-25,
            pageNumber:1,
            pageSize:30,
            pageList:[30,50,100,150,200],
            pagination:true,
            singleSelect: true,
            rownumbers: true,//行号
            columns: [[
                {
                    field: 'ACCOUNT_BODY',//域值
                    title: '交易主体',//标题
                    visible: true,//false表示不显示
                    sortable: false,//启用排序
                    // width : '10%',
                    formatter:function (value,row) {
                        if (row.BODY_TYPE) {
                            return value+'<span class="badge" style="color: white;">'+row.BODY_TYPE +'</span>';
                        }else {
                            return value
                        }
                    }
                },
                {
                    field: 'ACCOUNT_BODY_NUMBER',//域值
                    title: '交易主体账号',//内容
                    visible: true,//false表示不显示
                    // width : '20%'
                },
                {
                    field: 'ACCOUNT_BODY_CARD',//域值
                    title: '交易主体卡号',//内容
                    visible: true,//false表示不显示
                    // width : '20%',
                },
                {
                    field: 'SIGN',//域值
                    title: '收付标志',//内容
                    visible: true,//false表示不显示
                    // width : '10%',
                    formatter: function(value, row, index){
                        if(value){
                            return '支出';
                        }else{
                            return '收入';
                        }
                    }
                },
                {
                    field: 'TRADE_DATE',//域值
                    title: '交易时间',//内容
                    visible: true,//false表示不显示
                    // width : '10%',
                    sortable: true,//启用排序
                    formatter: function(value, row, index) {
                        if (value){
                            return changeDateFormat(value)
                        } else {
                            return "";
                        }
                    }
                },
                {
                    field: 'ACCOUNT_RIVAL',//域值
                    title: '交易对手',//内容
                    visible: true,//false表示不显示
                    // width : '10%'
                },
                {
                    field: 'ACCOUNT_RIVAL_NUMBER',//域值
                    title: '交易对手账号',//内容
                    visible: true,//false表示不显示
                    // width : '20%',
                    formatter:function (value) {
                        if (value){
                            return '<a onclick="showAccountBody(\''+value+'\')" style="cursor:pointer;">'+value+'</a>'
                        }
                    }
                },
                {
                    field: 'ACCOUNT_RIVAL_CARD',//域值
                    title: '交易对手卡号',//内容
                    visible: true,//false表示不显示
                    // width : '20%',
                    formatter:function (value) {
                        if (value){
                            return '<a onclick="showAccountBody(\''+value+'\')" style="cursor:pointer;">'+value+'</a>'
                        }
                    }
                },
                {
                    field: 'ACCOUNT_MONEY',//域值
                    title: '交易金额',//内容
                    visible: true,//false表示不显示
                    // width : '10%',
                    sortable: true,//启用排序
                },
                {
                    field: 'SURPLUS_MONEY',//域值
                    title: '交易后余额',//内容
                    visible: true,//false表示不显示
                    // width : '10%',
                    sortable: true,//启用排序
                },
                {
                    field: 'CONTENT_ABSTRACT',//域值
                    title: '摘要',//内容
                    visible: true,//false表示不显示
                    // width : '10%'
                },
                {
                    field: 'TELLER_NUMBER',//域值
                    title: '柜员号',//内容
                    visible: true,//false表示不显示
                    // width : '10%'
                },{
                    field: 'TRADING_ORGANIZATION_NUMBER',//域值
                    title: '交易机构号',//内容
                    visible: true,//false表示不显示
                    // width : '10%'
                },{
                    field: 'INSTITUTION_NUMBER',//域值
                    title: '对方机构号',//内容
                    visible: true,//false表示不显示
                    // width : '10%'
                },
                {
                    field: 'ACCOUNT_BODY_BANK',//域值
                    title: '交易主体归属行',//内容
                    visible: true,//false表示不显示
                    // width : '15%'
                },
                {
                    field: 'ACCOUNT_RIVAL_BANK',//域值
                    title: '交易对手归属行',//内容
                    visible: true,//false表示不显示
                    // width : '15%'
                },
                {
                    field: 'ACCOUNT_ADDRESS',//域值
                    title: '交易地点',//内容
                    visible: true,//false表示不显示
                    // width : '10%'
                },
                {
                    field: 'ACCOUNT_MODE',//域值
                    title: '交易方式',//内容
                    visible: true,//false表示不显示
                    // width : '10%'
                },
                {
                    field: 'SERIAL_NUMBER',//域值
                    title: '交易流水号',//内容
                    visible: true,//false表示不显示
                    // width : '10%'
                },
                {
                    field: 'MAC_ADDRESS',//域值
                    title: 'MAC地址',//内容
                    visible: true,//false表示不显示
                    // width : '10%'
                },
                {
                    field: 'IP_ADDRESS',//域值
                    title: 'IP地址',//内容
                    visible: true,//false表示不显示
                    // width : '10%'
                },
                {
                    field: 'CURRENCY',//域值
                    title: '币种',//内容
                    visible: true,//false表示不显示
                    // width : '10%'
                },
                {
                    field: 'REMARKS',//域值
                    title: '备注',//内容
                    visible: true,//false表示不显示
                    // width : '10%'
                }
            ]],
            onLoadSuccess: function (result) {
                $("span").click(function(){
                    $(this).nextAll("span").remove();
                });
            },
        });
    }

    function showDetail(rivalCard) {
        spantitle.html('<span><a class="listap" style="cursor:pointer;" onclick="queryList()">交易银行统计</a></span>').append('<span> > <a class="listap" style="cursor:pointer;" onclick="showDetail(\''+rivalCard+'\')">交易详情</a></span>');
        let keyword = $.trim($("#keyword").val());
        let starTime = $.trim($("#starTime").val());
        let endTime = $.trim($("#endTime").val());
        var opt =$('#table').datagrid('options');
        opt.sortName = "";
        opt.sortOder = "";
        $('#table').datagrid({
            url: '${ctx}/bill/stream/bank/content',
            fitColumns:true,
            queryParams: {
                bodyCards:cards.join(','),
                keyword:keyword,
                startTime:starTime,
                endTime:endTime,
                caseId:caseId,
                rivalCard:rivalCard
            },
            height:($(window).height())-($('.box-header').outerHeight(true))-($('#spantitle').outerHeight(true))-25,
            pageNumber:1,
            pageSize:30,
            pageList:[30,50,100,150,200],
            pagination:true,
            singleSelect: true,
            rownumbers: true,//行号
            columns: [[
                {
                    field: 'ACCOUNT_BODY',//域值
                    title: '交易主体',//标题
                    formatter:function (value,row) {
                        if (row.BODY_TYPE) {
                            return value+'<span class="badge" style="color: white;">'+row.BODY_TYPE +'</span>';
                        }else {
                            return value
                        }
                    }
                },
                {
                    field: 'ACCOUNT_BODY_NUMBER',//域值
                    title: '交易主体账号',//内容
                    formatter:function (value) {
                        if (value){
                            return '<a onclick="showAccountBody(\''+value+'\')" style="cursor:pointer;">'+value+'</a>'
                        }
                    }
                },
                {
                    field: 'ACCOUNT_BODY_CARD',//域值
                    title: '交易主体卡号',//内容
                    formatter:function (value) {
                        if (value){
                            return '<a onclick="showAccountBody(\''+value+'\')" style="cursor:pointer;">'+value+'</a>'
                        }
                    }
                },
                {
                    field: 'SIGN',//域值
                    title: '收付标志',//内容
                    formatter: function(value, row, index){
                        if(value){
                            return '支出';
                        }else{
                            return '收入';
                        }
                    }
                },
                {
                    field: 'TRADE_DATE',//域值
                    title: '交易时间',//内容
                    sortable: true,//启用排序
                    formatter: function(value, row, index) {
                        if (value){
                            return changeDateFormat(value);
                        }else {
                            return "";
                        }
                    }
                },
                {
                    field: 'ACCOUNT_RIVAL',//域值
                    title: '交易对手',//内容
                },
                {
                    field: 'ACCOUNT_RIVAL_NUMBER',//域值
                    title: '交易对手账号',//内容
                    formatter:function (value) {
                        if (value){
                            return '<a onclick="showAccountBody(\''+value+'\')" style="cursor:pointer;">'+value+'</a>'
                        }
                    }
                },
                {
                    field: 'ACCOUNT_RIVAL_CARD',//域值
                    title: '交易对手卡号',//内容
                    formatter:function (value) {
                        if (value){
                            return '<a onclick="showAccountBody(\''+value+'\')" style="cursor:pointer;">'+value+'</a>'
                        }
                    }
                },
                {
                    field: 'ACCOUNT_MONEY',//域值
                    title: '交易金额',//内容
                    sortable: true,//启用排序
                },
                {
                    field: 'SURPLUS_MONEY',//域值
                    title: '交易后余额',//内容
                    sortable: true,//启用排序
                },
                {
                    field: 'CONTENT_ABSTRACT',//域值
                    title: '摘要',//内容
                },
                {
                    field: 'TELLER_NUMBER',//域值
                    title: '柜员号',//内容
                },{
                    field: 'TRADING_ORGANIZATION_NUMBER',//域值
                    title: '交易机构号',//内容
                },{
                    field: 'INSTITUTION_NUMBER',//域值
                    title: '对方机构号',//内容
                },
                {
                    field: 'ACCOUNT_BODY_BANK',//域值
                    title: '交易主体归属行',//内容
                },
                {
                    field: 'ACCOUNT_RIVAL_BANK',//域值
                    title: '交易对手归属行',//内容
                },
                {
                    field: 'ACCOUNT_ADDRESS',//域值
                    title: '交易地点',//内容
                },
                {
                    field: 'ACCOUNT_MODE',//域值
                    title: '交易方式',//内容
                },
                {
                    field: 'SERIAL_NUMBER',//域值
                    title: '交易流水号',//内容
                },
                {
                    field: 'MAC_ADDRESS',//域值
                    title: 'MAC地址',//内容
                },
                {
                    field: 'IP_ADDRESS',//域值
                    title: 'IP地址',//内容
                },
                {
                    field: 'CURRENCY',//域值
                    title: '币种',//内容
                },
                {
                    field: 'REMARKS',//域值
                    title: '备注',//内容
                }
            ]],
            onLoadSuccess: function (result) {
                $("#showTable").show();
                $("#showEchart").hide();
            },
        });
    }

    $(".form_datetime").datepicker({
        format: "yyyy-mm-dd",
        autoclose: true,
        language:'zh-CN',
        pickerPosition:"bottom-left"
    });

    spantitle.html('<span class="listspan"><a class="listap" style="cursor:pointer;" onclick="queryList()">交易银行统计</a></span>');
    window.onload= firstTable;

    function firstTable() {
        let money = $.trim($("#minmoney").val());
        let maxmoney = $.trim($("#maxmoney").val());
        let keyword = $.trim($("#keyword").val());
        let starTime = $.trim($("#starTime").val());
        let endTime = $.trim($("#endTime").val());
        $('#table').datagrid({
            url: '${ctx}/bill/stream/bank/statistics',
            fitColumns:true,
            queryParams: {
                cards:cards.join(','),
                rivalName:keyword,
                startTime:starTime,
                endTime:endTime,
                caseId:caseId,
                minMoney:money,
                maxMoney:maxmoney
            },
            pageNumber:1,
            pageSize:30,
            pageList:[30,50,100,150,200],
            pagination:true,
            singleSelect: true,
            // fit:true,
            rownumbers: true,//行号
            height:($(window).height())-($('.box-header').outerHeight(true))-($('#spantitle').outerHeight(true))-25,
            columns: [[
                {
                    field: 'ACCOUNT_BODY_BANK',//域值
                    title: '归属银行',//内容
                },
                {
                    field: 'INSTITUTION_NUMBER',//域值
                    title: '对方机构号',//内容
                },
                {
                    field: 'ACCOUNT_RIVAL_BANK',//域值
                    title: '对方机构名称',//内容
                },
                {
                    field: 'ACCOUNT_COUNT',//域值
                    title: '交易次数',//标题
                    sortable: true,//启用排序
                    formatter:function(value,row,index){
                        return '<a onclick="showDetail(\''+row.ACCOUNT_RIVAL_CARD+'\')" style="cursor:pointer;" data-toggle="modal" data-target="#myModal">'+value+'</a>';
                    }
                },
                {
                    field: 'MORETHAN',//域值
                    title: '交易次数比',//内容
                    formatter:function(value,row,index){
                        return value+"%";
                    }
                },
                {
                    field: 'MONEY',//域值
                    title: '交易金额',//内容
                    sortable: true,//启用排序
                    formatter:function (value,row,index) {
                        if(!value) return 0;
                        if (Number.isInteger(value)) {
                            return value.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,');
                        } else {
                            return value.toString().replace(/(\d)(?=(\d{3})+\.)/g,'$1,');
                        }
                    }
                },
                {
                    field: 'MONEYPROPORTION',//域值
                    title: '交易金额比',//内容
                    formatter:function(value,row,index){
                        return value+"%";
                    }
                }
            ]],
            onLoadSuccess:function (data) {
                $("#showTable").hide();
                $("#showEchart").show();
                var xAxis = data.allRows.map(function(v){return v.ACCOUNT_RIVAL_BANK});
                var data1 = data.allRows.map(function(v){return {
                    name :v.ACCOUNT_RIVAL_BANK,
                    value :v.ACCOUNT_COUNT
                }});
                var data2 = data.allRows.map(function(v){return {
                    name :v.ACCOUNT_RIVAL_BANK,
                    value :v.MONEY
                }});
                showEcharts_cake("main1111111","交易次数",xAxis,data1);
                showEcharts_cake("main2222222","交易金额",xAxis,data2);
                $("#showTable").show();
                $("#showEchart").hide();
            }
        });
    }
    /*bootstrap table*/
    function queryList(){
        spantitle.html('<span><a class="listap" style="cursor:pointer;" onclick="queryList()">交易银行统计</a></span>');
        var opt =$('#table').datagrid('options');
        opt.sortName = "";
        opt.sortOder = "";
        firstTable();
    }
    function reset(){
        $("#keyword").val('');
        $("#starTime").val('');
        $("#endTime").val('');
    }
    function exportList(){
        // let keyword = $.trim($("#keyword").val());
        // let starTime = $.trim($("#starTime").val());
        // let endTime = $.trim($("#endTime").val());
        // window.location.href="${ctx}/bill/stream/export/9?rivalName="+keyword
        //     +"&beginTime="+starTime+"&endTime="+endTime+"&caseId="+caseId+"&cardList="+cards.join(',');

        var xhr = new XMLHttpRequest();
        var url="${ctx}/bill/stream/export/9";
        xhr.open('POST', url, true);
        xhr.responseType = "blob";  // 返回类型blob
        // 定义请求完成的处理函数
        xhr.onload = function () {
            // 请求完成
            if (this.status === 200) {
                var content = this.response;
                var aTag = document.createElement('a');
                var blob = new Blob([content]);
                var headerName = xhr.getResponseHeader("Content-disposition");
                var fileName = decodeURIComponent(headerName).substring(20);
                aTag.download = fileName;
                aTag.href = URL.createObjectURL(blob);
                aTag.click();
                URL.revokeObjectURL(blob);
            }
        };
        // 发送ajax请求
        var formdata=new FormData();
        formdata.append("rivalName",$.trim($("#keyword").val()));
        formdata.append("beginTime",$.trim($("#starTime").val()));
        formdata.append("endTime",$.trim($("#endTime").val()));
        formdata.append("cardList",cards.join(','));
        formdata.append("caseId",caseId);
        xhr.send(formdata);
    }
    if (parent.parent._checkedAccount.length){
        _checkedCallback(parent.parent._checkedAccount)
    }
    function _checkedCallback(_checkedAccount){
        cards = new Array();
        $.each(_checkedAccount,function (i,n) {
            cards[i] = "'"+n.split("_")[1]+"'";
        })
        queryList();
    }
    //转换日期格式(时间戳转换为datetime格式)
    function changeDateFormat(cellval) {
        var dateVal = cellval + "";
        if (cellval != null) {
            var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
        }
    };

</script>
<style>
    span#spantitle {
        margin-left: 10px;
        margin-right: 10px;
        line-height: 30px;
    }
    section.content {
        padding-top: 10px;
        padding-bottom: 0;
    }
    .stream_body .title{
        display: block;
        margin: 0;
    }
    .casemanage-switchtip {
        position: fixed;
        right: -10px;
        top: 10px;
    }
    .input-group{
        width: 120px;
        height: 30px;
    }
    .form-inline .form-control {
        width: 120px;
        height: 30px;
        border-color: #D2D6DE;
        font-size: 12px;
        border-color: #e4e4e4;
        border-radius: 0;
    }
    input#endTime,
    input#starTime
    {
        width: 120px;
    }
    input.btn.btn-primary.daobtn {
        background-color: #23B7E5;
        border-color: #23B7E5;
    }
    .glyphicon-calendar{
        top: 8px;
    }
    input.btn.btn-primary,
    input.btn.btn-default{
        width: 70px;
        height: 30px;
        line-height: 11px;
    }
    .stream_search {
        margin: -20px 0 -20px 0px;
    }
    .zcdbtn-con {
        display: inline-block;
        margin-left: -5px;
    }
    .el-button{
        width: 55px;
        margin-right: -15px;
        height: 25px;
        line-height: 0px;
    }
    button.el-button.daobtn.el-button--primary{
        background-color: #23B7E5;
        border-color: #23B7E5;
    }
    .content-wrapper {
        margin-left: 0;
        padding: 0;
    }
    .form-group.form_z {
        margin-right: 0px;
    }
    input.error { border: 1px solid red; }
    label.error {
        background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
        padding-left: 16px;
        padding-bottom: 2px;
        font-weight: bold;
        color: #EA5200;
    }
    .badge{
        background-color: #f7051f;
    }
    .col-md-10 {
        width: 86%;
    }
    label.control-label{
        color: #6f7689;
        font-weight: 400;
        font-size: 13px;
    }
    .btn-primary:active:focus{
        background-color: #4695ed;
        border-color: #4695ed;
    }

    .box-header .form-group{
        margin-right: 15px;
    }
    .bill-buttonarea .btn{
        margin-right: 12px;
    }
    .casemanage-switch .casemanage-zhexiantu.active {
        background-color: #4695ed;
    }
    .casemanage-switch .casemanage-zhexiantu {
        background-color: #f2f6f9;
        float: left;
        width: 50px;
        height: 35px;
        display: block;
        cursor: pointer;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        line-height: 35px;
        text-align: center;
    }
    #font_zhexian{
        color: #C1C2C3;
        font-size: 18px;
    }
    #font_zhexian.active{
        color: #F4F9FE;
    }
    .btn-primary{
        background-color:#4695ed;
        border-color:#4695ed;
    }
    .btn-primary:hover, .btn-primary:active, .btn-primary.hover{
        background: #61a8f5;
        border-color: #61a8f5;
    }
    .btn-primary.focus, .btn-primary:focus{
        background-color:#4695ed;
        border-color:#4695ed;
    }
    .form-control{
        border-radius:4px;
        border-color: #e4e4e4;
    }
    .input-group .form-control:first-child{
        border-top-right-radius:4px;
        border-bottom-right-radius: 4px;
    }
    .form-control:focus{
        border-color:#4695ed;
    }
    .form-control:hover{
        border-color:#4695ed;
    }
    .box{
        padding: 0;
        margin-bottom: 0;
    }
    .el-pagination {
        margin-top: 10px;
    }
</style>